<template>
  <!-- 居中容器 -->
  <div class="container">

    <!-- 轮播图 -->
    <div id="carousel-index">
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

        <!-- 轮播图指示器 -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" v-for="(item, index) in carousels" :data-slide-to="index" :class="index===0 ? 'active' : ''"/>
        </ol>

        <!-- 轮播图内容 -->
        <div class="carousel-inner" role="listbox">
          <div v-for="(item, index) in carousels" :class="index === 0 ? 'item active' : 'item'">
            <a href="#">
              <img :src="item.url" style="width: 100%; height: 512px"/>
            </a>
            <div class="carousel-caption">
              <h3>{{item.title}}</h3>
              <p>{{item.subtitle}}</p>
            </div>
          </div>

        </div>

        <!-- 轮播图控制器 -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div> <!-- 轮播图结束 -->

  </div>
</template>

<script>
export default {
  name: "HomePage",
  data: function () {
    return {
      carousels: [
        {
          url: 'https://uploadstatic.mihoyo.com/ys-obc/2021/12/27/4521515/7af61fffdee1556c90d8c8891ee0a9df_4141871638126431128.png',
          title: '百货奇货',
          subtitle: '...'
        },
        {
          url: 'https://gtms01.alicdn.com/tps/i1/TB1r4h8JXXXXXXoXXXXvKyzTVXX-520-280.jpg',
          title: '第一章',
          subtitle: '...'
        },
        {
          url: 'https://gtms01.alicdn.com/tps/i2/TB10vPXKpXXXXacXXXXvKyzTVXX-520-280.jpg',
          title: '第二章',
          subtitle: '...'
        },
        {
          url: 'https://gtms01.alicdn.com/tps/i3/TB1gXd1JXXXXXapXpXXvKyzTVXX-520-280.jpg',
          title: '第三章',
          subtitle: '...'
        }
      ]
    }
  }
}
</script>

<style scoped>
.container {
  margin-top: 100px;
}
#carousel-example-generic {
  margin-top: 0;
}
</style>
